<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>反馈页面</title>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/assets/aui/css/aui.css"/>
    <!-- jQuery Include -->
    <script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>

    <link rel="stylesheet" href="${ctxPath}/static/assets/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/assets/layui/layui.js" charset="utf-8"></script>
    <style>
    </style>
</head>
<body>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li>
            <header class="aui-bar aui-bar-nav">
                <a class="aui-pull-left aui-btn" onclick='retn()'>
                    <span class="aui-iconfont aui-icon-left"></span>返回
                </a>
                <div class="aui-title">意见反馈</div>
            </header>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label" style="font-size: 16px;">
                    问题类型:
                </div>
                <div class="aui-list-item-input">
                    <input type="text" id="question" placeholder="问题类型" value="" data-id="${id}" readonly="readonly" size="12px" style="color: grey">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-input">
                    <textarea placeholder="请补充详细问题和意见，我们会认真看完的哦" id="descrip" maxlength="500" style="size: 12px;"></textarea>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="layui-upload">
                <button type="button"  class="layui-btn layui-btn-sm" id="uploadImg" style="background-color: #00bcd4">图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                  <!--  预览图：-->
                    <div class="layui-upload-list" id="preview"></div>
                </blockquote>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label" style="font-size: 16px;">
                    联系方式:
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="请输入手机号" id="phone" maxlength="11" size="12px" style="color: grey">
                </div>
            </div>
        </li>
    </ul>
</div>
<div onclick="submitQuestion()" tapmode class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined aui-btn-sm">提交</div>
</body>
<script type="text/javascript" src="${ctxPath}/static/assets/aui/script/aui-toast.js"></script>
<script>
    var user = localStorage.getItem("userInfo");//以“key”为名称存储一个值“value”
    if (!user) {
        location.href = "${ctxPath}/wechat/public/toLoginPage";//未实现
    }
    $("#img").show();
    var obj = JSON.parse(user); // --> parse error

    function retn() {
        location.href = "${ctxPath}/wechat/public/toQuestion";
    }
    $(function () {
        var  questions=localStorage.getItem("questions");//以“key”为名称存储一个值“value”
        if(questions){
            var result = JSON.parse(questions); // 存在
            for(var i=0;i<result.length;i++){
                var  data=result[i];
                if(data.id=="${id}"){
                    $("#question").val(data.problem);
                }
            }
        }
    })

    //上传图片
    var size=0;
    var imgsUrl=new Array();
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        //多图片上传
        upload.render({
            elem: '#uploadImg'
            ,url: '${ctxPath}/upload/oss/uploadImageA'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    if(size>=4) {
                        apiready = function(){
                            api.parseTapmode();
                        }
                        var toast = new auiToast({
                        })
                        toast.fail({
                            title:"限制4张",
                            duration:2000
                        });
                        return;
                    }
                    $('#preview').append('<img style="height: 80px;width: 80px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕
                size++;
                if(res.status="0000"){
                   var imageUrl= res.data;
                    imgsUrl.push(imageUrl);
                }
            }
        });
    });
    //提交信息
    function submitQuestion() {
        apiready = function(){
            api.parseTapmode();
        }
        var toast = new auiToast({
        })
        var id=$("#question").attr("data-id");
        var descrip=$("#descrip").val();

        var imgs=$("#preview>img");
        if(imgs.length==0){
            toast.fail({
                title:"上传图片信息",
                duration:2000
            });
            return;
        }

        var  phone=$("#phone").val();
        if(!phone){
            toast.fail({
                title:"请输入联系方式",
                duration:2000
            });
            return;
        }
        var pattern = /^1[0-9]{10}$/;
        if(!pattern.test(phone)){
            toast.fail({
                title:"请输入正确的手机号",
                duration:2000
            });
            return;
        }
        //保存问题
        $.ajax({
            type: "POST",
            url: "${ctxPath}/knowledgeAnswers/add",
            data: {
                knowledgeId:parseInt(id),
                message:descrip,
                imageA:imgsUrl.length>0?imgsUrl[0]:null,
                imageB:imgsUrl.length>1?imgsUrl[1]:null,
                imageC:imgsUrl.length>2?imgsUrl[2]:null,
                imageD:imgsUrl.length>3?imgsUrl[3]:null,
                phone:phone,
                consumerId:obj.id
            },
            dataType: "json",
            success: function (result) {
                if (result.code == "200") {
                    toast.success({
                        title:"提交成功",
                        duration:2000
                    });
                    location.href = "${ctxPath}/wechat/public/toQuestion";
                }
            }
        });
    }
</script>
</html>